<template>
  <el-container>
    <el-header></el-header>
    <el-main
    >
      <el-table
          :data="userTable"
          height="550"
          border
          @selection-change="selectionUser"
      >
        <el-table-column type="index" width="35" align="center"/>
        <el-table-column type="selection" width="35" align="center"/>
        <el-table-column
            :prop="column.name"
            :label="column.title"
            :width="column.width"
            v-for="column in tableColumn"
            :key="column.id"
            show-overflow-tooltip
            align="center"
        >
          <template slot-scope="scope">
            <template v-if="column.name == 'sex'"
            >{{ scope.row.sex == 1 ? "男" : "女" }}
            </template>
            <el-tag
                v-else-if="column.name == 'freeze'"
                :type="scope.row.freeze == 1 ? 'error' : 'success'"
            >{{ scope.row.freeze == 1 ? "冻结" : "正常" }}
            </el-tag>
            <template v-else-if="column.name == 'options'">
              <el-button type="primary" size="small" icon="el-icon-edit"
              >修改
              </el-button>
              <el-button
                  type="warning"
                  size="small"
                  :icon="
                  scope.row.freeze == 1 ? 'el-icon-unlock' : 'el-icon-lock'
                "
              >{{ scope.row.freeze == 1 ? "解冻" : "冻结" }}
              </el-button>
              <el-button type="danger" size="small" icon="el-icon-delete"
              >删除
              </el-button>
            </template>
            <template v-else>{{ scope.row[column.name] }}</template>
          </template>
        </el-table-column>
      </el-table>
    </el-main
    >
    <el-footer
    >
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="current"
          :page-sizes="[15, 30, 45, 100, 200, 300, 400]"
          layout="total, sizes, prev, pager, next, jumper"
          :page-size="page"
          background
          :total="total"
      >
      </el-pagination>
    </el-footer>
  </el-container>
</template>

<script>
export default {
  name: "user",
  data() {
    return {
      user: undefined,
      current: 1,
      page: 15,
      total: 0,
      userTable: [],
      tableColumn: [
        {name: "name", title: "用户名", width: "150"},
        {name: "nickname", title: "昵称", width: "150"},
        {name: "sex", title: "性别", width: "60"},
        {name: "phone", title: "手机号", width: "150"},
        {name: "email", title: "邮箱", width: "150"},
        {name: "freeze", title: "状态", width: "80"},
        {name: "options", title: "操作", width: "300"},
      ],
    };
  },
  created() {
    this.getUserTable(this.current, this.page, this.user);
  },
  methods: {
    //获取用户列表
    getUserTable(current, size, user) {
      this.$store
          .dispatch("user/getUserTable", {current, size, user})
        .then((response) => {
          this.userTable = response.data;
          this.total = response.other.pageSize;
        })
          .catch(() => {
          });
    },
    //调整分页长度时触发
    handleSizeChange(val) {
      this.size = val;
      this.getUserTable(this.current, val, this.user);
    },
    //点击分页时触发
    handleCurrentChange(val) {
      this.getUserTable(val, this.page, this.user);
    },
    //多选更改时触发
    selectionUser(val) {
      console.log(val);
    },
  },
};
</script>

<style>
</style>
